<template>
    <div class="cor-wrapper">
        <p class="cor-name">合作案例</p>
        <div class="cor-content">
            <div class="cor-items">
                <div class="cor-inner-group">
                    <div class="left">
                        <div class="desc-title">
                            <p class="num">01</p>
                            <p class="name">阿里巴巴</p>
                        </div>
                        <div class="desc">阿里巴巴浙江国际站微信公众号，给国内国外不同的用户创总了不同的机会，为公司提升了宣传力！</div>
                        <ul class="desc-group">
                            <li>
                                <div class="desc-img"><img src="../assets/custom/对勾.png" alt=""></div>
                                <div class="desc-content">阿里巴巴国际站微</div>
                            </li>
                            <li>
                                <div class="desc-img"><img src="../assets/custom/对勾.png" alt=""></div>
                                <div class="desc-content">国际站国外不同的用</div>
                            </li>
                            <li>
                                <div class="desc-img"><img src="../assets/custom/对勾.png" alt=""></div>
                                <div class="desc-content">微信公众号微信公众号，给国内微信公众号</div>
                            </li>
                        </ul>
                    </div>
                    <div class="right">
                        <img src="../assets/custom/阿里巴巴封面@2x.png" alt="">
                    </div>
                </div>
            </div>
            <div class="cor-items">
                <div class="cor-inner-group">
                    <div class="right">
                        <img src="../assets/custom/鲲睿-800_483@2x.png" alt="">
                    </div>
                    <div class="left">
                        <div class="desc-title">
                            <p class="num">01</p>
                            <p class="name">阿里巴巴</p>
                        </div>
                        <div class="desc">阿里巴巴浙江国际站微信公众号，给国内国外不同的用户创总了不同的机会，为公司提升了宣传力！</div>
                        <ul class="desc-group">
                            <li>
                                <div class="desc-img"><img src="../assets/custom/对勾.png" alt=""></div>
                                <div class="desc-content">阿里巴巴国际站微</div>
                            </li>
                            <li>
                                <div class="desc-img"><img src="../assets/custom/对勾.png" alt=""></div>
                                <div class="desc-content">国际站国外不同的用</div>
                            </li>
                            <li>
                                <div class="desc-img"><img src="../assets/custom/对勾.png" alt=""></div>
                                <div class="desc-content">微信公众号微信公众号，给国内微信公众号</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="cor-items">
                <div class="cor-inner-group">
                    <div class="left">
                        <div class="desc-title">
                            <p class="num">01</p>
                            <p class="name">阿里巴巴</p>
                        </div>
                        <div class="desc">阿里巴巴浙江国际站微信公众号，给国内国外不同的用户创总了不同的机会，为公司提升了宣传力！</div>
                        <ul class="desc-group">
                            <li>
                                <div class="desc-img"><img src="../assets/custom/对勾.png" alt=""></div>
                                <div class="desc-content">阿里巴巴国际站微</div>
                            </li>
                            <li>
                                <div class="desc-img"><img src="../assets/custom/对勾.png" alt=""></div>
                                <div class="desc-content">国际站国外不同的用</div>
                            </li>
                            <li>
                                <div class="desc-img"><img src="../assets/custom/对勾.png" alt=""></div>
                                <div class="desc-content">微信公众号微信公众号，给国内微信公众号</div>
                            </li>
                        </ul>
                    </div>
                    <div class="right">
                        <img src="../assets/custom/超植封面图800@2x.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    name: "Cor",
    data() {
        return {}
    },
    components: {}
}
</script>

<style scoped lang='scss'>
.cor-wrapper {
    width: 100%;
    background: rgba(55, 63, 94, 1);
    padding: 80px 0;
    .cor-name {
        margin: 0 auto;
        width: 160px;
        height: 40px;
        font-size: 40px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 40px;
    }
    .cor-content {
        margin: 80px auto 0;
        width: 1200px;
        .cor-items {
            width: 1200px;
            height: 378px;
            background: linear-gradient(
                270deg,
                rgba(239, 239, 239, 1) 0%,
                rgba(255, 255, 255, 1) 100%
            );
            .cor-inner-group {
                padding: 50px 50px 60px;
                display: flex;
                justify-content: space-between;
                .left {
                    width: 480px;
                    height: 56px;
                    .desc-title {
                        width: 100%;
                        border-bottom: 1px solid rgba(186, 189, 200, 1);
                        display: flex;
                        .num {
                            width: 20px;
                            height: 20px;
                            font-size: 20px;
                            font-family: DINAlternate-Bold, DINAlternate;
                            font-weight: bold;
                            color: rgba(13, 26, 38, 1);
                            line-height: 20px;
                            margin-right: 20px;
                            padding-bottom: 17px;
                            border-bottom: 3px solid rgba(13, 26, 38, 1);
                        }
                        .name {
                            width: 88px;
                            height: 22px;
                            font-size: 22px;
                            font-family: PingFangSC-Semibold, PingFang SC;
                            font-weight: 600;
                            color: rgba(13, 26, 38, 1);
                            line-height: 22px;
                            padding-bottom: 17px;
                        }
                    }
                    .desc {
                        margin: 32px auto 15px;
                        width: 480px;
                        height: 44px;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: rgba(13, 26, 38, 1);
                        line-height: 22px;
                    }
                    .desc-group {
                        li {
                            display: flex;
                            .desc-img {
                                width: 16px;
                                height: 16px;
                                margin-right: 10px;
                                margin-bottom: 16px;
                            }
                            .desc-content {
                                height: 14px;
                                font-size: 14px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: rgba(49, 70, 90, 1);
                                line-height: 14px;
                            }
                        }
                    }
                }
                .right {
                    background: brown;
                    width: 460px;
                    height: 278px;
                }
            }
        }
    }
}
</style>